<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Test for SMIL Animation Behavior with textZoom</title>
  <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  <script type="text/javascript" src="smilTestUtils.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<body>
<p id="display"></p>
<div id="content">
  <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px"
       onload="this.pauseAnimations()">
    <text y="100px" x="0px" style="font-size: 5px">
      abc
      <animate attributeName="font-size" attributeType="CSS" fill="freeze"
               from="20px" to="40px" begin="1s" dur="1s"/>
    </text>
    <rect y="100px" x="50px" style="stroke-width: 5px">
      <animate attributeName="stroke-width" attributeType="CSS" fill="freeze"
               from="20px" to="40px" begin="1s" dur="1s"/>
    </rect>
  </svg>
</div>
<pre id="test">
<script class="testbody" type="text/javascript">
<![CDATA[
SimpleTest.waitForExplicitFinish();

// Helper function
function verifyStyle(aNode, aPropertyName, aExpectedVal)
{
  var computedVal = SMILUtil.getComputedStyleSimple(aNode, aPropertyName);
  is(computedVal, aExpectedVal, "computed value of " + aPropertyName);
}

function main()
{
  // Start out pause
  var svg = SMILUtil.getSVGRoot();
  ok(svg.animationsPaused(), "should be paused by <svg> load handler");
  is(svg.getCurrentTime(), 0, "should be paused at 0 in <svg> load handler");

  // Set text zoom to 2x
  var origTextZoom =  SpecialPowers.getTextZoom(window);
  SpecialPowers.setTextZoom(window, 2);

  try {
    // Verify computed style values at various points during animation.
    // * Correct behavior is for the computed values of 'font-size' to be
    // the same as their corresponding specified values, since text zoom
    // should not affect SVG text elements.
    // * I also include tests for an identical animation of the "stroke-width"
    // property, which should _not_ be affected by textZoom.
    var text = document.getElementsByTagName("text")[0];
    var rect = document.getElementsByTagName("rect")[0];

    verifyStyle(text, "font-size",    "5px");
    verifyStyle(rect, "stroke-width", "5px");
    svg.setCurrentTime(1);
    verifyStyle(text, "font-size",    "20px");
    verifyStyle(rect, "stroke-width", "20");
    svg.setCurrentTime(1.5);
    verifyStyle(text, "font-size",    "30px");
    verifyStyle(rect, "stroke-width", "30");
    svg.setCurrentTime(2);
    verifyStyle(text, "font-size",    "40px");
    verifyStyle(rect, "stroke-width", "40");
    svg.setCurrentTime(3);
    verifyStyle(text, "font-size",    "40px");
    verifyStyle(rect, "stroke-width", "40");
  } catch (e) {
    // If anything goes wrong, make sure we restore textZoom before bubbling
    // the exception upwards, so that we don't mess up subsequent tests.
    SpecialPowers.setTextZoom(window, origTextZoom);

    throw e;
  }

  // We're done! Restore original text-zoom before finishing
  SpecialPowers.setTextZoom(window, origTextZoom);
  SimpleTest.finish();
}

window.addEventListener("load", main, false);
]]>
</script>
</pre>
</body>
</html>
